---
interface Props {
  small?: boolean
  twitter?: boolean
  github?: boolean
  discord?: boolean
}

const { small, twitter = true, github = true, discord = true } = Astro.props
---

<div class="flex flex-row items-center gap-3 text-white">
  <!-- GITHUB -->
  {
    github && (
      <a
        aria-label="Threlte Github"
        href="https://github.com/threlte/threlte"
        target="_blank"
      >
        <svg
          height={small ? '20' : '26'}
          viewBox="0 0 30 30"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M10.0343 23.9272C10.0343 24.0482 9.89516 24.145 9.71976 24.145C9.52016 24.1631 9.38105 24.0664 9.38105 23.9272C9.38105 23.8063 9.52016 23.7095 9.69556 23.7095C9.87702 23.6914 10.0343 23.7881 10.0343 23.9272ZM8.15323 23.6551C8.11089 23.776 8.23185 23.9152 8.41331 23.9514C8.57056 24.0119 8.75202 23.9514 8.78831 23.8305C8.8246 23.7095 8.70968 23.5704 8.52823 23.516C8.37097 23.4736 8.19556 23.5341 8.15323 23.6551ZM10.8266 23.5523C10.6512 23.5946 10.5302 23.7095 10.5484 23.8486C10.5665 23.9696 10.7238 24.0482 10.9052 24.0059C11.0806 23.9635 11.2016 23.8486 11.1835 23.7277C11.1653 23.6127 11.002 23.5341 10.8266 23.5523ZM14.8065 0.374817C6.41734 0.374817 0 6.74377 0 15.1329C0 21.8406 4.22177 27.5805 10.252 29.6006C11.0262 29.7398 11.2984 29.2619 11.2984 28.8688C11.2984 28.4938 11.2802 26.4252 11.2802 25.1551C11.2802 25.1551 7.04637 26.0623 6.15726 23.3527C6.15726 23.3527 5.46774 21.5926 4.47581 21.1389C4.47581 21.1389 3.09073 20.1893 4.57258 20.2075C4.57258 20.2075 6.07863 20.3285 6.90726 21.768C8.23185 24.1027 10.4516 23.4313 11.3165 23.0321C11.4556 22.0643 11.8488 21.393 12.2843 20.9938C8.90323 20.6188 5.49194 20.1289 5.49194 14.3103C5.49194 12.647 5.95161 11.8123 6.91935 10.7478C6.7621 10.3547 6.24798 8.73369 7.07661 6.64095C8.34073 6.2478 11.25 8.27402 11.25 8.27402C12.4597 7.93531 13.7601 7.7599 15.0484 7.7599C16.3367 7.7599 17.6371 7.93531 18.8468 8.27402C18.8468 8.27402 21.756 6.24176 23.0202 6.64095C23.8488 8.73974 23.3347 10.3547 23.1774 10.7478C24.1452 11.8184 24.7379 12.653 24.7379 14.3103C24.7379 20.147 21.1754 20.6127 17.7944 20.9938C18.3508 21.4716 18.8226 22.3789 18.8226 23.8002C18.8226 25.8385 18.8044 28.3607 18.8044 28.8567C18.8044 29.2498 19.0827 29.7277 19.8508 29.5885C25.8992 27.5805 30 21.8406 30 15.1329C30 6.74377 23.1956 0.374817 14.8065 0.374817ZM5.87903 21.2357C5.8004 21.2962 5.81855 21.4353 5.92137 21.5502C6.01815 21.647 6.15726 21.6893 6.23589 21.6107C6.31452 21.5502 6.29637 21.4111 6.19355 21.2962C6.09677 21.1994 5.95766 21.1571 5.87903 21.2357ZM5.22581 20.7458C5.18347 20.8244 5.24395 20.9212 5.36492 20.9817C5.46169 21.0422 5.58266 21.024 5.625 20.9393C5.66734 20.8607 5.60685 20.7639 5.48589 20.7035C5.36492 20.6672 5.26815 20.6853 5.22581 20.7458ZM7.18548 22.899C7.08871 22.9777 7.125 23.1591 7.26411 23.274C7.40323 23.4131 7.57863 23.4313 7.65726 23.3345C7.73589 23.2559 7.6996 23.0744 7.57863 22.9595C7.44556 22.8204 7.26411 22.8022 7.18548 22.899ZM6.49597 22.0099C6.39919 22.0704 6.39919 22.2277 6.49597 22.3668C6.59274 22.5059 6.75605 22.5664 6.83468 22.5059C6.93145 22.4272 6.93145 22.27 6.83468 22.1309C6.75 21.9918 6.59274 21.9313 6.49597 22.0099Z"
            class="fill-current"
          />
        </svg>
      </a>
    )
  }

  <!-- DISCORD -->
  {
    discord && (
      <a
        aria-label="Threlte Discord"
        href="https://discord.gg/EqUBCfCaGm"
        target="_blank"
      >
        <svg
          viewBox="0 0 16 16"
          aria-hidden="true"
          height={small ? '22' : '32'}
          astro-icon="social/discord"
        >
          <path
            fill="currentColor"
            d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
          />
        </svg>
      </a>
    )
  }

  <!-- TWITTER -->
  {
    twitter && (
      <a
        aria-label="Threlte Twitter"
        href="https://twitter.com/threlte"
        target="_blank"
      >
        <svg
          height={small ? '20' : '26'}
          viewBox="0 0 30 26"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M26.9163 6.88959C26.9354 7.15607 26.9354 7.42261 26.9354 7.6891C26.9354 15.8173 20.7488 25.1828 9.44166 25.1828C5.95813 25.1828 2.7221 24.1739 0 22.4227C0.494943 22.4797 0.970785 22.4988 1.48477 22.4988C4.3591 22.4988 7.00509 21.528 9.11804 19.8719C6.41499 19.8148 4.14974 18.0445 3.36927 15.6079C3.75001 15.665 4.1307 15.7031 4.53049 15.7031C5.0825 15.7031 5.63457 15.6269 6.1485 15.4937C3.33124 14.9226 1.21823 12.448 1.21823 9.4594V9.38328C2.03673 9.84014 2.98859 10.1257 3.9974 10.1637C2.3413 9.05961 1.25631 7.17511 1.25631 5.04311C1.25631 3.901 1.56083 2.85404 2.09386 1.94033C5.12053 5.6713 9.67006 8.10781 14.7715 8.37436C14.6764 7.9175 14.6193 7.44166 14.6193 6.96576C14.6193 3.57739 17.3604 0.817261 20.7678 0.817261C22.5381 0.817261 24.137 1.55965 25.2602 2.75889C26.6497 2.4924 27.9822 1.97842 29.1625 1.27412C28.7055 2.70182 27.7348 3.90106 26.4594 4.66243C27.6967 4.52925 28.896 4.18653 30 3.71069C29.1626 4.92891 28.1156 6.0139 26.9163 6.88959Z"
            class="fill-current"
          />
        </svg>
      </a>
    )
  }
</div>
